<template>
  <div>
    <h2 class="detail-title">课程基本信息</h2>
    <div class="detail-info">
      <div class="detail-item">ID：{{data.id}}</div>
      <div class="detail-item">课程描述：{{data.describe}}</div>
      <div class="detail-item">课程状态：{{data.courseStatusLabel}}</div>
      <div class="detail-item">课程类型：{{data.courseTypeLabel}}</div>
      <div class="detail-item">理论课时：{{data.theo_hours}}</div>
      <div class="detail-item">实践学时：{{data.prac_hours}}</div>
      <div class="detail-item">学分：{{data.credit}}</div>
      <div class="detail-item">课程描述：{{data.describe}}</div>
      <div class="detail-item-half">
        <span class="form-input-label">章节：</span>
        <div style="margin-right: 20px;"  class="el-tree-div">
          <CourseTree :course_id="id" :chapters="chapters" @fetchChapter="fetchChapter" />
        </div>
      </div>
      <div class="detail-item-half">封面：<img :src="data.avatar_url" width="100" height="100" /></div>
    </div>
     <el-tabs v-model="activeTab">
      <el-tab-pane label="选课用户" name="stu">
        <CourseStudents :course_id="id" />
      </el-tab-pane>
      <el-tab-pane label="授课教师" name="tea">
        <CourseTeachers :course_id="id" />
      </el-tab-pane>
    </el-tabs>
    <el-button class="go-back-btn" @click="goBack" type="primary">返回</el-button>
  </div>
</template>
<script>
import goBack from "@/mixins/goBack";
import { courseModel } from "@/api/admin_models";
import CreateFilter from '@/mixins/CreateFilter.js';
import CourseTree from '@/components/CourseTree';
import CourseStudents from '@/components/CourseStudents'
import CourseTeachers from '@/components/CourseTeachers'
export default {
  mixins: [goBack, CreateFilter],
  components: {CourseTree, CourseStudents, CourseTeachers},
  data() {
    return {
      data: {},
      id: null,
      chapters: [],
      activeTab: 'stu'
    };
  },
  mounted() {
    this.id = parseInt(this.$route.params.id);
    this.getItem();
    this.fetchChapter();
  },
  methods: {
    getItem() {
      courseModel.item(this.id, res => {
        res.data.courseTypeLabel = this.courseTypeToLabel(res.data.course_type);
        res.data.courseStatusLabel= this.courseStatusToLabel(res.data.course_status);
        this.data = res.data
      });
    },
    fetchChapter() {
      courseModel.chapters(this.id, res => {
        this.chapters = res.data
      });
    },
    editChapter(id) {
      console.log(id)
    }
  }
};
</script>
<style scoped lang="scss">
  .el-tree-div{
    margin-left: 10px;
    border: 1px solid #cccccc;
    padding: 20px;
    width: 80%;
  }
  
</style>